import React from 'react'
class LifecycleDemo extends React.Component{
  state = { counter: 0 }
  constructor(props) {
    super(props)
    console.log('[constructor]')
    console.log('state初始化完成：',this.state)
  }
  static getDerivedStateFromProps(nextProps/*下一次的属性*/, prevState/*上一次的state*/) {
    console.log('[getDerivedStateFromProps]')
    console.log('下一次的属性：', nextProps)
    console.log('上一次的state：', prevState)
    return {counter:100}
  }
  componentDidMount() {
    console.log('%c[componentDidMount]','color:brown')
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('%c[shouldComponentUpdate]', 'color:green')
    return true
  }
  getSnapshotBeforeUpdate(nextProps, nextState) {
    console.log('%c[getSnapshotBeforeUpdate]', 'color:#f60')
    return `快照时间：${Date.now()}`
  }
   componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("%c[componentDidUpdate]", "color:#406");
    console.log(" snapshot:", snapshot);
  }
  componentWillUnmount() {
    console.log("%c[componentWillUnmount]再见！", "font-weight:blod");
  }
  handleClick = () => {
    this.setState({
      counter:this.state.counter + 1
    })
  }
  render() {
    console.log('%c[render]','color:red')
    return <div>
      <h1>
      {this.state.counter}
      </h1>
      <button onClick={this.handleClick}>增加数字</button>
    </div>
  }
}
export default LifecycleDemo